<template>
	<view class="detailplay">
		<uni-nav-bar :title="detail.disciplineName" leftIcon="icon-fanhui" rightIcon="true" @clickLeft="$back()">
		</uni-nav-bar>
    <view class="u-f-jsa">
      <view class="play" :style="{'width':isShow?'50%':'100%'}">
      <video class="video-class" id="videoControl" :src="detail.videoUrl" :poster="detail.disciplineImage" controls>
        <cover-view class="fixed" v-show="!isShow" @click="showRightMask">课件资源</cover-view>
      </video>
    </view>
    <view class="course flex1 positionRe" v-show="isShow">
      <span class="iconfont icon-cuo" @click="hide"></span>
       <play :src="detail.coursewareUrl"></play>
       <!-- <web-view src="http://view.xdocin.com/zhenxuepai-oss-cn-hangzhou-aliyuncs-com_r6tbis.htm?aaaa=aaaxcvbcvb"></web-view> -->
    </view>
    </view>
   <!-- <view class="fixed" @click="showRightMask">课件资源
      <span class="iconfont icon-youshuangjiantou"></span>
    </view> -->
	</view>
</template>

<script>
  import play from './play.nvue'
	export default {
    components:{
      play
    },
		data() {
			return {
				detail:{},
        isShow:false,
        wv:''
			}
		},
    onLoad(option) {
      this.detail.id=option.id
      this.getDetailById()
      // // #ifdef APP-PLUS
      // var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
      // setTimeout(() => {
      // 	 this.wv = currentWebview.children()[0];
      //  let sys=uni.getSystemInfoSync()
      //  console.log(this.wv)
      // 	this.wv.setStyle({
      //     top:sys.statusBarHeight+(6*sys.screenHeight/100),
      //     right:0,
      //     bottom:0,
      // 		left:'50%',
      //     // transform:'translateX(-50%)', 
      //     width:'50%'
      // 	});
      // }, 1000); //如果是页面初始化调用时，需要延时一下
      // // #endif
    },
    mounted() {
       this.videoCtx = uni.createVideoContext('videoControl')
     
      
    },
		methods: {
      hide(){
        console.log(123)
        this.isShow=false
      },
      // 点击显示题目解析遮罩层
      showRightMask() {
        this.isShow = true
        this.videoCtx.pause();
      },
      // 获取专题详情
			getDetailById(){
        this.$http.get(`/special/${this.detail.id}`).then(res=>{
            console.log(res.data)
          this.detail=res.data
        })
      }
		}
	}
</script>

<style lang="scss">
  .detailplay{
    height: 100%;
    .play{
      width: 50%;
      height: calc(100vh - var(--status-bar-height) - 8vh);
      .video-class{
        width: 100%;
        height: 100%;
      }
    }
    .fixed{
      @include fixed;
    }
    .icon-cuo{
      width: 50px;
      height: 50px;
      font-size: px2vw(28);
      float: right;
    }
    .course{
      background-color: #ffffff;
    }
  }
  

</style>
